<template>
  <div>

    <Modal v-model="noticeFlage" :title="noticesDetail.title">
      <div v-if="noticesDetail" class="noticesDetail" v-html="noticesDetail.content">

      </div>
    </Modal>
    <div class="box flex">
      <div class="box-left">
        <div class="card shop flex">
          <div>
            <h4>Hi,<span style="margin-left:5px;">{{ userData.memberName }}</span></h4>
            <img :src="logoImg"
                 alt="" class="shop-logo">
          </div>
          <div class="shop-box">
            <div class="box-item">
              <div>店铺名稱：{{ userData.storeName || '暫無' }}</div>
            </div>
            <div class="box-item">
              <div>店铺狀態：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div>
            </div>
            <!--            <div class="box-item" @click="im()">
                          <Button :loading='load' type="info">點擊登錄客服</Button>
                        </div>-->
          </div>

          <div class="rate-box">
            <div>
              <i-circle :percent="(userData.serviceScore * 20)" :size="120" :stroke-width="5" :trail-width="4"
                        stroke-color="#fecb89" stroke-linecap="square">
                <div class="demo-Circle-custom">

                  <p class="bold">{{ userData.serviceScore }}分</p>
                </div>
              </i-circle>
              <h5>服务得分</h5>
            </div>
            <div>
              <i-circle :percent="(userData.deliveryScore * 20)" :size="120" :stroke-width="5" :trail-width="4"
                        stroke-color="#a7c5eb" stroke-linecap="square">
                <div>

                  <p class="bold">{{ userData.deliveryScore }}分</p>
                </div>
              </i-circle>
              <h5>交貨得分</h5>
            </div>
            <div>
              <i-circle :percent="(userData.descriptionScore * 20)" :size="120" :stroke-width="5" :trail-width="4"
                        stroke-color="#848ccf" stroke-linecap="square">
                <div>
                  <p class="bold">{{ userData.descriptionScore }}分</p>
                </div>
              </i-circle>
              <h5>評價得分</h5>
            </div>
          </div>
        </div>
        <div class="card">
          <h4>待办事项</h4>

          <div class="detail-list">
            <div class="detail-item" @click="navigateTo('orderList')">
              <div>
                <span>{{ homeData.unPaidOrder || 0 }}</span>
                <div>待付款</div>
              </div>
              <div class="detail-title">
                交易前
              </div>
            </div>

            <div class="detail-item" @click="navigateTo('orderList')">
              <div>
                <span>{{ homeData.unDeliveredOrder || 0 }}</span>
                <div>待發貨</div>
              </div>
              <div>
                <span>{{ homeData.deliveredOrder || 0 }}</span>
                <div>待收貨</div>
              </div>
              <div class="detail-title">
                交易中
              </div>
            </div>
            <div class="detail-item">
              <div @click="navigateTo('returnMoneyOrder')">
                <span>{{ homeData.returnMoney || 0 }}</span>
                <div>退款</div>
              </div>
              <div @click="navigateTo('returnGoodsOrder')">
                <span>{{ homeData.returnGoods || 0 }}</span>
                <div>退貨</div>
              </div>
              <div @click="navigateTo('memberComment')">
                <span>{{ homeData.memberEvaluation || 0 }}</span>
                <div>待評價</div>
              </div>
              <div class="detail-title">
                交易後
              </div>
            </div>
            <div class="detail-item" @click="navigateTo('orderComplaint')">
              <div>
                <span>{{ homeData.complaint || 0 }}</span>
                <div>待处理</div>
              </div>

              <div class="detail-title">
                投訴
              </div>
            </div>
            <div class="detail-item" @click="navigateTo('goods')">
              <div>
                <span>{{ homeData.waitUpper || 0 }}</span>
                <div>待上架</div>
              </div>
              <div>
                <span>{{ homeData.waitAuth || 0 }}</span>
                <div>审核中</div>
              </div>
              <div class="detail-title">
                商品
              </div>
            </div>

            <div class="detail-item">
              <div @click="navigateTo('seckill')">
                <span>{{ homeData.seckillNum || 0 }}</span>
                <div>秒殺活動</div>
              </div>
              <div @click="navigateTo('accountStatementBill')">
                <span>{{ homeData.waitPayBill || 0 }}</span>
                <div>等待对账</div>
              </div>
              <div class="detail-title">
                其他
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- 公告 -->
      <div class="card box-right">
        <h4>平台公告</h4>
        <div>
          <div v-for="(item, index) in notices" :key="index" class="notice-title">
            <a @click="clickLinkNotices(item)">{{ item.title }}</a>
          </div>
        </div>
      </div>
    </div>

    <div class="card ">
      <h4>统计數据</h4>
      <div class="count-list flex">
        <div class="count-item" @click="navigateTo('goods')">
          <div>
            <Icon class="icon" size="31" type="md-photos"/>
          </div>
          <div>
            <div class="counts">{{ homeData.goodsNum || 0 }}</div>
            <div>上架商品數量</div>
          </div>

        </div>
        <div class="count-item" @click="navigateTo('orderStatistics')">
          <div>
            <Icon class="icon" size="31" type="ios-card"/>
          </div>
          <div>
            <div class="counts">{{ homeData.orderPrice || 0 | unitPrice('HK$') }}</div>
            <div>今日訂單总额</div>
          </div>

        </div>
        <div class="count-item" @click="navigateTo('orderList')">
          <div>

            <Icon class="icon" size="31" type="md-list"/>
          </div>
          <div>
            <div class="counts">{{ homeData.orderNum || 0 }}</div>
            <div>今日訂單數量</div>
          </div>

        </div>
        <div class="count-item" @click="navigateTo('trafficStatistics')">
          <div>
            <Icon class="icon" size="31" type="md-person"/>
          </div>
          <div>
            <div class="counts">{{ homeData.storeUV || 0 }}</div>
            <div>今日访客數量</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getHomeNotice, getSellerHomeData, userMsg} from "@/api/index";
import {getIMDetail} from "@/api/common"
import {seeArticle} from "@/api/pages";
import Cookies from "js-cookie";
import {getStore} from "@/libs/storage";

export default {
  name: "home",
  data() {
    return {
      noticeFlage: false, // 控制平台公告显隐
      homeData: {}, // 首頁數据
      userData: "", // 店铺信息
      notices: "", // 平台公告列表
      noticesDetail: { // 平台公告詳情
        title: "",
      },
      IMLink: "",
      load: false, //加载Im
      logoImg: "", //logo图片
    };
  },

  methods: {
    // 跳轉頁面
    navigateTo(name) {
      this.$router.push({
        name,
      });
    },
    // 初始化數据
    async init() {
      let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
      this.logoImg = require('@/assets/logo' + getStore('storeId') + '.png');
      this.userData = userInfo;
      let res = await getHomeNotice();
      if (res.success) {
        this.notices = res.result.records;
      }
    },
    // 跳轉文章頁
    async clickLinkNotices(val) {
      let res = await seeArticle(val.id);
      if (res.success) {
        this.noticesDetail = res.result;
        this.noticeFlage = true;
      }
    },

    /**
     * 點擊登錄im的時候需要去判断一下当前店铺信息是否失效
     * 失效的话重新請求刷新token保证最新的token去访问im
     */
    async im() {
      // 获取访问Token
      let accessToken = this.getStore("accessToken");
      this.load = true
      await this.getIMDetailMethods();
      const userInfo = await userMsg();
      this.load = false
      if (userInfo.success && this.IMLink) {
        window.open(`${this.IMLink}?token=` + accessToken);
      } else {
        this.$Message.error("請登錄後再聯系客服");
      }
    },

    // 获取im信息
    async getIMDetailMethods() {
      let res = await getIMDetail();
      if (res.success) {
        this.IMLink = res.result;
      }
    },
    // 获取首頁數据
    async getHomeData() {
      let res = await getSellerHomeData();
      if (res.success) {
        this.homeData = res.result;
      }
    },
  },
  mounted() {
    this.init();
    this.getHomeData();
  },
};
</script>
<style lang="scss" scoped>
@import "./home.scss";

.noticesDetail {
  /deep/ img {
    max-width: 100%;
    max-height: 200px;
  }
}
</style>
